<template>
  <div class="listhelper">

    <div class="switchover">
      <van-tabs v-model="active" animated>
        <van-tab title="创建歌单" :to="{ name: 'creatlist', params: { id: 2 } }">内容 1</van-tab>
        <van-tab title="收藏歌单" :to="{ name: 'liststar', params: { id: 1 } }"></van-tab>
        <van-tab title="歌单助手">
        <div>
          <ul v-for="item in result" :key="item.id" class="circulation"  @click="dianji(item.id)">
            <van-icon name="play-circle-o" />
            <img :src="item.picUrl">
            <p>{{item.name}}</p>
          </ul>
        </div>
        </van-tab>
      </van-tabs>


       

    </div>

  </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
import { Icon } from 'vant';

Vue.use(Icon);
Vue.use(Tab);
Vue.use(Tabs);

import { recommendAPI} from "../../../api/wdxh";
export default {
  name: "listhelper",
  data() {
    return {
      id: "",
      active: 2,
      result:"",
      limit: 0,
    };
  },
  props: [],
  components: {},
  computed: {},
  watch: {},
  created() {
    this.recommen()
    //  获取路由传来的id
    this.id = this.$route.params.id;
    console.log(this.id);
     // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  //  组件激活
  activated() {
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  mounted() {},
  methods: {
    //推荐歌单
    async recommen() {
      const sruse = await recommendAPI(50);
      console.log(sruse);
      this.result = sruse.result;
      console.log(this.result);
    },

    //跳转歌单页面
    dianji(id){
      this.$router.push(`/songlistdetail/${id}`);
    }

  },
};
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.switchover .van-icon{
  font-size:30px;
  position: absolute;
  margin-left:85%;
  margin-top:25px;
  color: #555;
}
.switchover{
  
  position: relative;
  width:90%;
  margin: 20px  auto 0;
}
.circulation{
  margin:5px 0;
  display: flex;
  font-size:12px;
}
.circulation img{
  width:80px;
  height:80px;
}
</style>
